<template>
	<view class="lang">
		<topTitle :title="t('language.language')" />
		<view class="list">
			<view :class="{ active: currentLocale === 'tw' }" @click="changeLanguage('tw')">繁体</view>
			<view :class="{ active: currentLocale === 'en' }" @click="changeLanguage('en')">English</view>
		</view>
		<customerService />

	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { useI18n } from 'vue-i18n';
	import i18n from '@/i18n';

	const { t, locale } = useI18n();
	const currentLocale = ref(uni.getStorageSync('user-locale') || locale.value);

	const changeLanguage = (lang : string) => {
		locale.value = lang;
		currentLocale.value = lang;
		uni.setStorageSync('user-locale', lang);
	};

	const savedLocale = uni.getStorageSync('user-locale');
	if (savedLocale) {
		locale.value = savedLocale;
		currentLocale.value = savedLocale;
	}
</script>
<style scoped lang="scss">
	@import "../../static/scss/notLoggedIn.scss";
</style>